<template>
	<div class="city-top-page">
		<div class="top">
			<van-search
				v-model="searchValue"
				shape="round"
				placeholder="城市/区域/位置"
				show-action
				@cancel="cancelClick"
			/>
			<van-tabs v-model:active="tabActive" color="#ff9645">
				<template v-for="(value, key, index) in allCities" :key="key">
					<van-tab :title="value.title" :name="key"></van-tab>
				</template>
			</van-tabs>
		</div>
		<div class="content">
			<template v-for="(value, key, index) in allCities" :key="index">
				<cityGroupVue v-show="tabActive === key" :group-data="value"></cityGroupVue>
			</template>
		</div>
	</div>
</template>

<script setup>
	import { ref } from "vue"
	import { useRouter } from "vue-router"
	import useCityStore from "@/stores/modules/city"
	import { storeToRefs } from "pinia"
	import cityGroupVue from "./cpns/city-group.vue"
	const router = useRouter()
	const searchValue = ref()
	const tabActive = ref()
	const cancelClick = () => {
		router.back()
	}
	//从store获取数据
	//发起请求
	const cityStore = useCityStore()
	cityStore.fetchAllCitiesData()
	const { allCities } = storeToRefs(cityStore)
</script>

<style scoped>
	.city-top-page {
		position: relative;
		z-index: 9;
		background-color: #fff;
	}
	.top {
		position: relative;
		z-index: 9;
	}
	.content {
		height: calc(100vh - 98px);
		overflow-y: auto;
	}
</style>
